<template>
  <div id="goods">
    <c-title :hide="false" :text="infoData.title"></c-title>
    <div class="topimg" :style="{ backgroundImage: `url(${infoData.image_url})` }">
      <div class="timeLimit">
        <div class="price">
          <div class="priceSpan">{{ $i18n.t("money") }}</div>
          <div class="priceTxt">{{ infoData.amount }}</div>
        </div>
        <div class="rightPrice">
          <template v-if="infoData.status == 1 || infoData.status == 0">
            <div class="rightPrice_txt">距离众筹{{ infoData.status == 1 ? "结束" : "开始" }}</div>
            <van-count-down :time="infoData.status == 0 ? Number(infoData.start_at+'000') - nowtime : Number(infoData.end_at+'000') - nowtime">
              <template #default="timeData">
                <div class="rightPrice_time">
                  <div class="day">{{ timeData.days }}天</div>
                  <div class="hour">{{ timeData.hours > 9 ? timeData.hours : "0" + timeData.hours }}</div>
                  <div class="mark">:</div>
                  <div class="min">{{ timeData.minutes > 9 ? timeData.minutes : "0" + timeData.minutes }}</div>
                  <div class="mark">:</div>
                  <div class="second">{{ timeData.seconds > 9 ? timeData.seconds : "0" + timeData.seconds }}</div>
                </div>
              </template>
            </van-count-down>
          </template>
          <template v-if="infoData.status == 2">
            <div class="rightPrice_txt">众筹已结束</div>
          </template>
        </div>
      </div>
    </div>
    <div class="title">{{ infoData.title }}</div>
    <div class="contenBox">
      <div class="explain">
        <div class="explain_head">众筹说明</div>
        <div class="explain_html">{{ infoData.illustrate }}</div>
      </div>
      <div class="goodsDetail">
        <div class="explain_head">活动说明</div>
        <div class="explain_html" v-html="infoData.rich_text"></div>
      </div>
    </div>
    <div class="btn">
      <template v-if="infoData.status == 3 || infoData.is_activity_member">
        <div class="registered">已报名</div>
      </template>
      <template v-else-if="infoData.status == 0">
        <div class="NotStarted">未开始</div>
      </template>
      <template v-else-if="infoData.status == 1">
        <div class="activity">
          <div class="activity_left" @click="toOrder(infoData, 'pay')">我要自费</div>
          <div class="activity_right" @click="toOrder(infoData)">我要众筹</div>
        </div>
      </template>
      <template v-else-if="infoData.status == 2">
        <div class="finish">活动已结束</div>
      </template>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      infoData: [],
      nowtime:new Date().valueOf()
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    toOrder(item, key = false) {
      let gid = item.id;
      if (key) {
        if (this.$route.params.uid) {
          this.$router.push(this.fun.getUrl("crowd_activity_Order", { id: gid, uid: this.$route.params.uid }, { self: true }));
        } else {
          this.$router.push(this.fun.getUrl("crowd_activity_Order", { id: gid }, { self: true }));
        }
      } else {
        if (this.$route.params.uid) {
          this.$router.push(this.fun.getUrl("crowd_activity_Order", { id: gid, uid: this.$route.params.uid }));
        } else {
          this.$router.push(this.fun.getUrl("crowd_activity_Order", { id: gid }));
        }
      }
    },
    getData() {
      $http
        .get("plugin.crowdfunding.frontend.activity.show", { activity_id: this.$route.params.id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.infoData = response.data;
            this.fun.setWXTitle(this.infoData.title);
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
#goods {
  padding-bottom: 3rem;
}
.btn {
  position: fixed;
  bottom: 0;
  width: 23.4375rem;
  height: 3.125rem;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  .activity {
    display: flex;
    align-items: center;
    justify-content: center;
    .activity_left {
      width: 9.375rem;
      height: 2.5rem;
      background: linear-gradient(90deg, #f9c500, #f8c400);
      box-shadow: 0rem 0.0938rem 0.2813rem 0rem rgba(129, 50, 0, 0.06), 0rem 0.2188rem 0.4688rem 0rem rgba(253, 237, 160, 0.2), 0rem -0.125rem 0.375rem 0rem rgba(243, 39, 0, 0.56);
      border-radius: 1.25rem;
      text-align: center;
      line-height: 2.5rem;
      font-size: 0.9375rem;
      color: #be4000;
      font-weight: bold;
    }
    .activity_right {
      margin-left: 1.5625rem;
      width: 9.375rem;
      height: 2.5rem;
      background: linear-gradient(90deg, #f47000, #f25301);
      box-shadow: 0rem 0.0938rem 0.2813rem 0px rgba(129, 50, 0, 0.06), 0rem 0.2188rem 0.4688rem 0rem rgba(253, 237, 160, 0.2), 0rem -0.125rem 0.375rem 0rem rgba(176, 75, 1, 0.56);
      border-radius: 1.25rem;
      text-align: center;
      line-height: 2.5rem;
      color: #ffffff;
      font-size: 0.9375rem;
      font-weight: bold;
    }
  }
  .NotStarted {
    width: 20rem;
    height: 2.5rem;
    background: #dcdcdc;
    border-radius: 40px;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 2.5rem;
    color: #6b6b6b;
    font-weight: bold;
  }
  .registered {
    width: 20rem;
    height: 2.5rem;
    background: #ffe5e5;
    border-radius: 40px;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 2.5rem;
    color: #ff0000;
    font-weight: bold;
  }
  .finish {
    width: 20rem;
    height: 2.5rem;
    background: #dcdcdc;
    border-radius: 1.25rem;
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 2.5rem;
    color: #6b6b6b;
    font-weight: bold;
  }
}
.contenBox {
  background: #ffdfc4;
  padding: 0.625rem;
  padding-bottom: 1rem;
  .goodsDetail {
    width: 100%;
    background: #ffffff;
    margin-top: 0.625rem;
    padding-top: 0.9063rem;
    padding-bottom: 0.9rem;
    .explain_html {
      width: 100%;
      overflow: hidden;
      text-align: left;
      font-size: 0.8125rem;
      margin-top: 0.9063rem;
      ::v-deep img {
        max-width: 100% !important;
        height: auto !important;
      }
    }
    .explain_head {
      font-size: 0.75rem;
      font-weight: 400;
      color: #ff0000;
      position: relative;
    }
    .explain_head::before {
      content: "";
      position: absolute;
      right: 61%;
      top: 0.2188rem;
      width: 2.1875rem;
      height: 0.0313rem;
      background: #ff0000;
      opacity: 0.2;
    }
    .explain_head::after {
      content: "";
      position: absolute;
      left: 61%;
      top: 7px;
      width: 70px;
      height: 1px;
      background: #ff0000;
      opacity: 0.2;
    }
  }
  .explain {
    width: 100%;
    background: #ffffff;
    padding: 0.9063rem 0.4688rem 1.0313rem 0.6563rem;
    .explain_head {
      font-size: 0.75rem;
      font-weight: 400;
      color: #ff0000;
      position: relative;
    }
    .explain_html {
      width: 100%;
      overflow: hidden;
      text-align: left;
      font-size: 0.8125rem;
      margin-top: 0.9063rem;
      ::v-deep img {
        max-width: 100% !important;
        height: auto !important;
      }
    }
    .explain_head::before {
      content: "";
      position: absolute;
      right: 61%;
      top: 7px;
      width: 70px;
      height: 1px;
      background: #ff0000;
      opacity: 0.2;
    }
    .explain_head::after {
      content: "";
      position: absolute;
      left: 61%;
      top: 7px;
      width: 70px;
      height: 1px;
      background: #ff0000;
      opacity: 0.2;
    }
  }
}
.title {
  // height: 4.0625rem;
  padding: 0.9063rem 2.5313rem 1.0313rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: bold;
  color: #2b2b2b;
  line-height: 1.3125rem;
  text-align: left;
  background: #ffffff;
  // display: -webkit-box;
  // -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;
  // overflow: hidden;
}
.topimg {
  height: 22.1875rem;
  width: 100%;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .timeLimit {
    width: 100%;
    height: 3.4375rem;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcrowd_activity_good_limit.png");
    background-size: contain;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.875rem;
    .price {
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      max-width: 9.0313rem;
      overflow: hidden;
      .priceSpan {
        font-size: 0.625rem;
      }
      .priceTxt {
        max-width: 9.0313rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1.1rem;
      }
    }
    .rightPrice_time {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      font-size: 0.75rem;
      .day {
        font-weight: 400;
        color: #ff0000;
        font-size: 0.75rem;
      }
      .hour,
      .min,
      .second {
        width: 1.2188rem;
        height: 1.3125rem;
        background: #ff3200;
        border-radius: 0.125rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 0.75rem;
        margin: 0 8px;
      }
      .second {
        margin-right: 0;
      }
    }
    .rightPrice_txt {
      text-align: right;
      font-weight: 400;
      color: #ff0000;
      font-size: 0.75rem;
      margin-bottom: 0.3rem;
    }
  }
}
</style>